<template>
	<view class="tabs" :class="{'tab-fixed':fixed}">
		<view class="item" :class="{current:(tabItem.value==current)}" v-for="(tabItem,tabItemKey) in items" @click="click(tabItem)"
		 :key="tabItemKey">{{tabItem.label}}</view>
	</view>
</template>
<script>
	export default {
		name: 'MyTabs',
		props: {
			items: {
				type: Array,
				default: null
			},
			value: {
				default: null
			},
			fixed: {
				default: false
			},
		},
		data() {
			return {
				current: this.value
			}
		},
		methods: {
			click(item) {
				this.current = item.value
				this.$emit('onTabChange', item.value)
			},
			setCurrent(value) {
				this.current = value;
			}
		},
		watch: {
			value(val) {
				this.current = val
			}
		}
	}
</script>
<style lang="scss">
	.tabs {
		width: 100%;
		overflow-x: auto;
		border-bottom: 1upx solid #ddd;
		margin-bottom: 30upx;
		font-size: $uni-font-size-lg;
		display: flex;
		justify-content: space-between;
		.item {
			padding: 20upx 15upx;
			margin: 0 30upx;
			line-height: 42upx;
			flex: 1;
			text-align: center;
		}
		.current {
			color: #2d8cf0;
			border-bottom: 2px solid #2d8cf0
		}
	}
	.tab-fixed{
		position: fixed;
		top: var(--window-top);
		background-color: white;
	}

</style>
